import el from '../utils/el'
import box from './box'

/**
 * 生成头部元素
 * @param {Object} headLayout - 头部布局对象
 * @returns {HTMLElement} - 返回包含头部元素的HTML元素
 */
export default function headElement(headLayout) {
  // 解构头部布局和头部内容
  const { titleLayout, subtitleLayout,
          composerLayout, lyricistLayout, arrangerLayout ,tempoLayout} = headLayout
  const { title, subtitle, composer, lyricist, arranger ,tempo} = headLayout.head

  /**
   * 生成文本样式字符串
   * @param {Object} options - 包含字体家族、大小和对齐方式的对象
   * @returns {string} - 返回生成的样式字符串
   */
  const getStyle = ({ family, size, anchor }) => {
    return `
      font-family: ${family}
      font-size: ${size}
      text-anchor: ${anchor}
    `
  }

  // 创建一个包含头部各个部分的图形元素数组
  return el.create('g', [
    // box(headLayout, 'green'),

    // 如果标题存在，则添加标题文本元素
    title ? el('text', {
      ...titleLayout.cxby,
      style: getStyle({ ...titleLayout, anchor: 'middle' })
    }, title) : [],

    // 如果副标题存在，则添加副标题文本元素
    subtitle ? el('text', {
      ...subtitleLayout.cxby,
      style: getStyle({ ...subtitleLayout, anchor: 'middle'})
    }, subtitle) : [],

    // 如果作曲家存在，则添加作曲家文本元素
    composer ? el('text', {
      ...composerLayout.x2by,
      style: getStyle({ ...composerLayout, anchor: 'end' })
    }, composer) : [],

    // 如果作词者存在，则添加作词者文本元素
    lyricist ? el('text', {
      ...lyricistLayout.x2by,
      style: getStyle({ ...lyricistLayout, anchor: 'end' })
    }, lyricist) : [],

    // 如果节奏存在，则添加节奏文本元素
    tempo ? el('text', {
      ...tempoLayout.xby,
      style: getStyle({ ...tempoLayout, anchor: 'end' })
    }, tempoLayout.text) : []
  ])
}
